@tailwind base;

html {
  @apply font-light;
  /* https://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page */
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

.font-slab {
  font-family: 'Balsamiq Sans', sans-serif;
}

.dot {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
}

@media print
{
    .no-print, .no-print *
    {
        display: none !important;
    }
}

h1 {
  @apply font-extralight text-4xl;
}

h2 {
  @apply font-bold text-2xl;
}

h3 {
  @apply font-bold text-2xl;
}

h4 {
  @apply font-bold text-base;
}

/* TB: Why do we have this? It makes it (a lot) harder to style these element within the templates... */
* + p, * + ul, * + ol, * + pre {
  @apply mt-4;
}

a {
  @apply font-semibold text-blue-400;
  text-decoration: underline;
}

strong {
  @apply font-bold;
}

.tiny-btn {
  @apply text-sm pt-1 px-2 border-b-2;
}

/* Container for pages which are not the main code page and not copy pages */
.common-page-container {
  @apply w-full max-w-screen-2xl mx-auto p-8;
}

/* For main page content */
.copy-container { @apply max-w-screen-lg mx-auto; }
.copy-container-wide { @apply max-w-screen-xl mx-auto; }

.text-display-copy, .text-business-copy {
  @apply leading-relaxed;
}

/* Apply somewhat fancy styles to running text (good for landing page copy) */
.text-display-copy h2 {
  text-align: center;
  @apply text-4xl text-pink-600;
}

.text-display-copy h3 {
  @apply text-4xl text-pink-600;
}

.text-display-copy .columns h3 {
  @apply text-2xl;
}

/**
 * text-business-copy
 *
 * For Real Business Value(tm).
 */
.text-business-copy { }

.text-business-copy h3:first-child { @apply mt-0; }

.text-business-copy * + h3 { @apply mt-8; }



.btn-shape {
  @apply font-slab leading-6 font-normal tracking-wide;
  @apply pt-2 pb-1 px-4 border border-b-4 rounded no-underline;
  display: inline-block;
}

.btn-shape-new {
  @apply font-slab leading-6 font-normal tracking-wide;
  @apply pt-2 pb-1 px-4 border rounded-md no-underline;
  display: inline-block;
}

.green-btn {
  @apply btn-shape;
  @apply bg-green-500 text-white border-green-700;
}

.green-btn-new {
  @apply btn-shape-new;
  @apply bg-green-500 text-white border-green-500;
}

.green-btn-new:disabled, .green-btn-new[disabled] {
  @apply btn-shape-new;
  @apply  bg-gray-500  text-white border-gray-500;
}

.green-btn:disabled, .green-btn[disabled] {
  @apply bg-gray-500 border-gray-700;
}


.green-btn:disabled, .green-btn[disabled] {
  @apply bg-gray-500 border-gray-700;
}

.white-btn {
  @apply btn-shape;
  @apply bg-white text-blue-500 border-blue-400;
}

.white-btn-new {
  @apply btn-shape-new;
  @apply bg-gray-100 text-blue-900 border-gray-100;
}

.stripe-colored {
  @apply bg-yellow-400 border-yellow-500 border-b-4;
}

.stripe-white { @apply border-b-4; }

.stripe-colored h2, .stripe-colored a { @apply text-white; }
.stripe-colored .column-pane a { @apply text-blue-700; }
.stripe-colored .column-pane { @apply bg-white shadow-md rounded-lg; }

.heading-underline { @apply bg-pink-600 w-36 mx-auto h-1 my-8; }

.stripe-colored .heading-underline {
  @apply bg-white;
}

.text-links-plain a {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}


.tooltip {
  position: relative;
  display: inline-block;

}

.tooltip .tooltiptext{
    @apply invisible absolute;
    @apply bg-white text-red-600 items-center;
    width: 130;
    bottom: 150%;
    left: 50%;
    margin-left: -80px;


}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  @apply absolute;
  content: " ";
  top: 100%;
  /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}


.green-btn:hover:enabled,
a.green-btn:hover {
  @apply bg-green-400 border-green-500;
  @apply active:bg-green-700 active:border-green-700;
}

.green-btn-new:hover:enabled,
a.green-btn-new:hover {
  @apply bg-green-400 border-green-500;
  @apply active:bg-green-700 active:border-green-700 transition-all ease-in duration-200;
}

.red-btn {
  @apply btn-shape;
  @apply bg-red-500 text-white border-red-700;
}

.red-btn-new {
  @apply btn-shape-new;
  @apply bg-red-500 text-white border-red-500 transition-all ease-in duration-200;
}

.red-btn:hover {
  @apply bg-red-400 border-red-500;
  @apply active:bg-red-700 active:border-red-700;
}


.red-btn-new:hover {
  @apply bg-red-400 border-red-400;
  @apply active:bg-red-700 active:border-red-700;
}

.yellow-btn {
  @apply btn-shape;
  @apply bg-yellow-500 text-black border-yellow-700;
}

.yellow-btn-new {
  @apply btn-shape-new;
  @apply bg-yellow-500 text-black border-yellow-700 transition-all ease-in duration-200;
}

.yellow-btn:hover {
  @apply bg-yellow-400 border-yellow-500;
  @apply active:bg-yellow-700 active:border-yellow-700;
}

.yellow-btn-new:hover {
  @apply bg-yellow-400 border-yellow-500;
  @apply active:bg-yellow-700 active:border-yellow-700;
}

.pink-btn-new {
  @apply btn-shape-new;
  @apply text-white bg-pink-400 border-pink-500 transition-all ease-in duration-200;
}

.pink-btn {
  @apply btn-shape;
  @apply text-white bg-pink-400 border-pink-500;
}

.pink-btn:hover {
  @apply bg-pink-300 border-pink-400;
  @apply active:bg-pink-700 active:border-pink-500;
}

.pink-btn-new:hover {
  @apply bg-pink-300 border-pink-400;
  @apply active:bg-pink-700 active:border-pink-500;
}

.blue-btn {
  @apply btn-shape;
  @apply bg-blue-500 text-white border-blue-700;
}


.blue-btn-new {
  @apply btn-shape-new;
  @apply bg-gray-200 text-blue-800 border-gray-200 transition-all ease-in duration-200;
}

.blue-btn:hover {
  @apply bg-blue-400 border-blue-500;
  @apply active:bg-blue-700 active:border-blue-700;
}

.blue-btn-new:hover {
  @apply bg-blue-300 border-blue-400;
  @apply active:bg-blue-400 active:border-blue-500;
}

.blue-btn-new:disabled, .blue-btn-new[disabled] {
  @apply bg-gray-200 border-gray-200 text-gray-500;
  @apply active:bg-gray-200 active:border-gray-200;
}

.gray-btn-shape {
  @apply font-slab leading-6 font-normal tracking-wide;
  @apply pt-2 pb-1 px-4 rounded no-underline;
  display: inline-block;
}

.gray-btn {
  @apply gray-btn-shape;
  @apply bg-gray-300 text-gray-500;
}

.gray-btn:hover {
  @apply bg-gray-100;
  @apply active:bg-gray-700 active:border-gray-700;
}

.back-btn {
  @apply gray-btn;
  @apply text-blue-500;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 8rem;
}

.back-btn:hover {
  @apply bg-gray-200;
  @apply active:bg-gray-700 active:border-gray-700;
}

/* Styles only for use in MarkDown blocks */
/* NOTE: I'm pretty sure we don't render class="markdown" anymore anywhere */
.markdown {
  @apply text-xl text-gray-800 leading-normal;
}

.markdown li + li, .markdown li > p + p {
  @apply my-2;
}
.markdown strong {
  @apply font-bold;
}
.markdown * + h1 {
  @apply leading-tight mb-2 mt-10;
}

h1 {
  @apply font-slab font-medium text-blue-800;
  @apply leading-tight text-5xl mb-2 mt-10;
}

h2 {
  @apply font-slab font-medium text-blue-800;
  @apply leading-tight text-2xl mb-2 mt-10;
}

h2:first-child { margin-top: 0; }

h3 {
  @apply font-slab text-blue-700;
  @apply leading-tight text-xl mt-4 mb-1;
}

h4 {
  @apply mt-4 mb-2;
}

pre, code {
}

.markdown code {
  @apply py-1 px-1 text-base;
}

pre code {
  @apply block bg-gray-200 py-2 px-4 my-2 rounded text-base border-gray-300 border;
  @apply text-red-600;
}

pre {
  white-space: pre-wrap;
}

/**
 * A container for Ace editors that adds a little padding around it
 *
 * (It looks nicer if the text isn't all the way up to the margin
 */
.ace-container {
  background-color: #272822;
  @apply p-2 rounded;
}

/* Code in a fenced code block (``` in MarkDown) */
pre, pre code {
  font-size: 100%;
  color: white;
}

/* All code (` and ```) */
code {
  @apply font-mono inline rounded py-1 px-2 font-normal;
  background: #272822 !important;
  color: #ff6188;
  font-size: 90%;
}

.markdown blockquote {
  @apply border-l-4 border-gray-300 ltr:pl-4 rtl:pr-4 italic;
}

@tailwind components;

@tailwind utilities;

.btn {
  @apply btn-shape;
  @apply bg-blue-500 text-white border-blue-700 no-underline;
}

.btn:hover {
  @apply bg-blue-400 border-blue-500;
  @apply active:bg-blue-700 active:border-blue-700
}

.menubar-item-new {
  @apply cursor-pointer block border-b-4 tracking-wide;
  /* Colors */
  @apply border-gray-100;
}

.menubar-item {
  @apply cursor-pointer block border-b-4 tracking-wide;
  /* Colors */
  @apply border-gray-100;
}

.menubar-item:hover {
  /* Colors */
  @apply border-gray-100;
}

.menubar-item.active {
  /* Colors */
  @apply border-blue-600 !important;
}

.menubar-item-new.active {
  /* Colors */
  @apply border-blue-700 !important;
}

.menubar-text {
  @apply items-center text-base lg:text-xl no-underline font-slab p-1;
  /* Colors */
  @apply text-blue-600;
}

.menubar-text-new {
  @apply items-center text-base lg:text-xl no-underline font-slab p-1;
  /* Colors */
  @apply text-blue-800;
}

.cust-adv-tab {
  @apply cursor-pointer block border-b-4 tracking-wide;
  /* Colors */
  @apply border-gray-400;
}

.cust-adv-tab.active {
  /* Colors */
  @apply border-blue-800 !important;
}

.cust-adv-tab-text {
  @apply font-slab;
  /* Colors */
  @apply text-blue-800;
}

#output, #quiz_question_output_container {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

.dropdown-menu {
  @apply absolute block rounded-md ltr:right-0 rtl:left-0 ltr:mr-1 rtl:ml-1 w-max p-4 shadow-lg;;
  top: 40px;
  @apply cursor-auto; /* Undo cursor-pointer we inherit from the menu */
}

.dropdown-blue {
  @apply border-blue-500 border-2 bg-gray-100;
}

.dropdown-blue-new {
  @apply border-blue-700 border-2 bg-gray-100;
}

.dropdown-green {
  @apply bg-gray-100 border-2 border-green-500;
}

.dropdown-menu h2 {
  @apply font-medium mx-4 pb-2 mb-2 text-center;
}

.dropdown-green h2 {
  @apply text-green-600;
}

.add-language-item {
  @apply text-gray-800 bg-green-400 no-underline hover:bg-green-500 hover:text-white py-2 px-4 block whitespace-nowrap;
  @apply cursor-pointer w-52 font-medium rounded-md;
  @apply grow-0;
}

.dropdown-item {
  @apply text-gray-800 no-underline hover:bg-blue-600 py-2 px-4 block whitespace-nowrap;
  @apply cursor-pointer w-52 font-medium rounded-md;
  @apply grow-0;
}

.dropdown-item:hover {
  @apply bg-blue-600 text-white;
}

.text-shadow {
  text-shadow: 0 2px 4px rgba(0,0,0,0.10);
}

.text-shadow-md {
  text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
}

.text-shadow-lg {
  text-shadow: 0 15px 30px rgba(0,0,0,0.11), 0 5px 15px rgba(0,0,0,0.08);
}

.text-shadow-none {
  text-shadow: none;
}

/* Lists */

ul {
  list-style: disc outside none;
}

ol {
  list-style: decimal outside none;
}

.text-display-copy ul, .text-display-copy ol,
.text-business-copy ul, .text-business-copy ol {
  @apply ml-10;
}
.text-adventure-copy ul, .text-adventure-copy ol {
  @apply ml-8;
}

.text-display-copy ul li + li, .text-display-copy ol li + li,
.text-business-copy ul li + li, .text-business-copy ol li + li {
  @apply mt-2;
}

.text-adventure-copy ul li + li, .text-adventure-copy ol li + li {
  @apply mt-1;
}

/* AUTH */
input:disabled {
  @apply bg-gray-400;
}

input[type=checkbox], input[type=radio] {
  @apply appearance-none border border-gray-700 w-5 h-5;
}

input[type=radio] {
  @apply rounded-full;
}

#signup input:required, #signup select:required, #profile input:required, #change_password input:required {
  @apply border border-red-400;
}

/* Make this !important to it over-writes the red required border when valid */
input:required:valid, select:required:valid {
  @apply border-green-400 !important;
}

input[type=checkbox]:checked, input[type=radio]:checked {
  @apply bg-green-400 border-green-600;
}

input, select {
  @apply border border-gray-400;
}

table.users thead {
  font-weight: bold;
}

table.users td {
  padding: 10px;
  border: solid 1px gray;
}

/* Keep the class name the same to prevent complex restructuring -> the RTL version is actually left-hand-shadow */
/* https://stackoverflow.com/questions/17572619/how-to-create-a-inset-box-shadow-only-on-one-side */
body[dir='ltr'] .right-hand-shadow {
  box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}

body[dir='rtl'] .right-hand-shadow {
  box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}

.tab {
  @apply py-2 px-1 mt-2 bg-gray-100 rounded-t-lg border-t-8 border-gray-300 text-sm cursor-pointer;
  box-shadow:
    /* bottom */ inset 0px -4px 4px -1px rgba(0,0,0,0.1);
}

.teacher_tab {
  @apply border-green-300;
}

.special_tab {
  @apply border-blue-300;
}

.command_tab {
  @apply border-[#fdb2c5];
}

.active-bluebar-btn {
  @apply bg-blue-300;
  box-shadow: inset 0 2px 4px 0 rgb(0 0 10 / 0.3);
}

/* TB: We shouldn't ever do this, all this dynamic handling can already be fixed with Tailwind! */
@screen lg {
  .tab {
    @apply px-2;
  }
}
@screen xl {
  .tab {
    @apply px-4;
  }
}

.tab + .tab {
  box-shadow:
    /* bottom */ inset 0px -4px 4px -1px rgba(0,0,0,0.1),
    /* left */ inset 4px 0px 4px -1px rgba(0,0,0,0.1);
}

.adv-selected {
  @apply  bg-blue-100;
}

.not-selected-adv {
}
/* EDITOR WARNINGS & ERRORS */

div#errorbox, div#warningbox {
   position: relative;
}

p.close-dialog {
   @apply ltr:right-[5px] rtl:left-[5px];
   font-weight: bold;
   position: absolute;
   top: 5px;
   cursor: pointer;
}

.editor-error {
  @apply bg-blue-500/70 border-red-500 border-b-2 border-t-2 absolute;
  z-index: 10; /* Show higher than the active line (which has z-index 2) */
}

/**
 * Will be used to strikethrough a line without actual text, so we need to fake it
 * with a horizontal line that's a bit offset from the top.
 */
.disabled-line {
  @apply absolute;
  border-top: solid 1px white;
  margin-top: 0.6em;
  border-radius: 0px !important;
}

/**
 * Will be used to indicate current line in debugger
 */
.debugger-current-line {
    @apply absolute;
    background: #2D6099;
    z-index: 20
}

/* DOCS */

.expandable-docs-text h1 {
   margin-top: 30px;
   margin-bottom: 30px;
}

/* QUIZ */

#quiz-iframe {
  height: 72rem;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}


/* Stats */
.stats-period-toggle.active {
  color: black;
  text-decoration: none;
  cursor: default;
  font-weight: normal;
}

.stats-legend {
  list-style-type: none;
}

.stats-legend-item {
  display: inline;
  padding-right: 15px;
  cursor: default;
}

.stats-legend-color-box {
  width: 45px;
  height: 12px;
  display:inline-block;
  margin-right: 5px;
}

/* Tab content - closed */
.accordion .accordion-tab input ~ .tab-content {
  max-height: 0;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}

/* Accordion icon */
.accordion .accordion-tab label::before {
  @apply ltr:float-right rtl:float-left ltr:right-0 rtl:left-0;
  top: 0;
  display: block;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5;
  font-size: 1.25rem;
  font-weight: bolder;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

/* Tab content - open */
.accordion .accordion-tab input:checked ~ .tab-content {
  max-height: 3000vh;
}

/* Accordion icon formatting - closed */
.accordion .accordion-tab input[type=checkbox] + label::before {
  @apply ltr:right-[5px] rtl:left-[5px];
  content: ">";
  transform: rotate(90deg);
}

/* Accordion icon formatting - open */
.accordion .accordion-tab input[type=checkbox]:checked + label::before {
  transform: rotate(270deg);
}

/* Profile page */

.section-header {
  @apply bg-blue-200 px-8 py-2 rounded-lg text-3xl cursor-pointer;
}

.section-header-danger {
  @apply bg-red-300 px-8 py-2 rounded-lg text-3xl cursor-pointer;
}

.profile-section-body-header {
  @apply mb-4 pb-2 border-b inline-block w-full;
}

.profile-section-body {
  @apply bg-white shadow-md rounded px-8 py-4 mx-auto w-full lg:w-3/4 hidden;
}

.personal-input {
  @apply block appearance-none w-3/4 lg:w-1/2 text-gray-700 px-4 py-1 rounded-lg;
}

/* Signup page */
.signup-container {
  @apply mx-auto flex px-8 flex-row items-center justify-start;
}

.signup-label {
  @apply inline-block w-1/3 md:w-48;
}


.signup-input {
  @apply inline-block w-2/3 md:w-80 lg:w-96 px-2 py-1 rounded-lg border-gray-400;
}

/* Developers mode toggle */
.toggle-circle {
  @apply ltr:left-0 rtl:right-0;
  transition: all 0.2s ease-in-out;
}

body[dir='ltr'] input:checked ~ .toggle-circle {
  transform: translateX(100%);
  @apply bg-green-400;
}

body[dir='rtl'] input:checked ~ .toggle-circle {
  transform: translateX(-100%);
  @apply bg-green-400;
}

/* For the keyword toggle we have to move 200% instead of 100%, implement as edge case */
body[dir='ltr'] #keyword_toggle_container input:checked ~ .toggle-circle {
/*  transform: translateX(200%); */
}

body[dir='rtl'] #keyword_toggle_container input:checked ~ .toggle-circle {
/*  transform: translateX(-200%); */
}

input:checked ~ .toggle-path {
  @apply bg-gray-600;
}

.focused-option {
  @apply border-double border-8 active;
  @apply scale-110;
}

/* Not really nice, but we have to use the !important attribute to overwrite the current style */
.incorrect-option {
    background-color: rgba(234, 55, 55, 0.6) !important;
    border: 5px #c21919 dashed!important;
}

/* Also not really nice, but with the relic quiz code still an improvement */
.quiz-icons {
  @apply h-14 w-14 relative;
  top: -40px;
  left: -10px;
}

.animate-keys {
  @apply absolute bottom-1 right-2;

  /* Would be nice to animate this with Tailwind as well, but should be fine for now */
  animation-name: animate-keys;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
}

/* We could also add this keyframe to tailwind.config.js, but as it is the only one: leave here for now */
@keyframes animate-keys {
  0%   {bottom:15px; font-size: 1em; opacity: 1}
  100% {bottom:100%; font-size: 4em; opacity: 0}
}

.drop-adventures-hint {
  @apply bg-blue-100 border-blue-300;
}

.drop-adventures-active {
  @apply bg-yellow-100 border-yellow-300;
}

.adventures-tab {
  @apply flex-row w-auto overflow-x-auto overflow-y-hidden;
}

.adventures-tab[style*='display: block'] {
  display: flex !important;
}

.profile-nametag__stats {
  @apply text-center w-full flex flex-row justify-center items-stretch
}

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  @apply bg-gray-400;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  @apply bg-green-500
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

input:disabled::placeholder {
  @apply text-gray-700
}



.htmx-indicator.custom-indicator{
  opacity:0;
  transition: opacity 0ms ease-in;
}
.htmx-request .custom-indicator{
  opacity:1;
}
.htmx-request.custom-indicator{
  opacity:1;
}

div[class^="ace_incorrect_hedy_code"] {
   border-bottom: 2px dashed red;
   position: absolute;
   cursor: pointer !important;
   pointer-events: auto;
}

.student_adventure_checkbox[disabled] {
  @apply relative bg-gray-200 rounded border-gray-500 !important
}

.student_adventure_checkbox {
  @apply relative bg-white rounded border-gray-500 !important
}

.student_adventure_checkbox:checked {
  @apply relative bg-green-300 rounded border-gray-500  !important
}

/* Make the CodeMirror editor take up the entire available height of its container
   and add a scroll bar (source: https://discuss.codemirror.net/t/how-to-set-max-height-of-the-editor/2882)

   But only for the editor page (readonly editors can be as high as is necessary)
   */
.fixed-editor-height .cm-editor { @apply h-full; }
.fixed-editor-height .cm-scroller { @apply overflow-x-auto };

/* Remove the margin between the scroll bar and the side of the container */
.cm-editor { margin-right: 0px !important; }

/* Hyperscript doesn't like when we use [] inside of classes */
.max-h-550px {
  @apply max-h-[550px]
}

.sliding-content-closed {
  grid-template-rows: 0fr;
}

.sliding-content-open {
  grid-template-rows: 1fr;
}

.menu-content-closed {
  @apply opacity-0 translate-y-0 z-0;
}

.menu-content-open {
  @apply opacity-100 translate-y-1;
}

.sliding-content-closed-test {
  grid-template-columns: 0fr;
}

.sliding-content-open-test {
  grid-template-columns: 1fr;
}

.adventure-item.selected {
  @apply bg-blue-300;
}

.adventure-item.selected .text-gray-500 {
  @apply text-white !important;
}

@keyframes loading-placeholder {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(100%);
          }
    }